<template>
  <div class='specify-body'>
    <div class="search-box" v-if="$store.state.searchShow">
      <span>{{formaltData.searchInfo.title}}</span>
      <el-date-picker
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        v-model="moreSearch.date"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
        >
      </el-date-picker>

      <div class="more-search" v-if="formaltData.searchInfo.more">
        <div v-for="(item, index) in formaltData.searchInfo.more" :key="index">
          <span>{{item.label}}</span>
          <el-select v-model="item.value" placeholder="请选择">
            <el-option
              v-for="(opt,optIndex) in item.array"
              :key="optIndex"
              :label="opt.label"
              :value="opt.value">
            </el-option>
          </el-select>
        </div>
      </div>
      <el-button type="primary" class="search-btn" @click="doSearch">搜索</el-button>
    </div>

    <!-- 表格批量操作 -->
    <div class="table-operate" v-if="formaltData.operates">
      <el-button v-for="(btn, btnIndex) in formaltData.operates" :key="btnIndex" class="ft12 btn">{{btn.label}}</el-button>
    </div>

    <div class="table-box">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column v-for="(item, index) in formaltData.tableModel" :key="index" v-if="item.type==='index'" type="index" :label="item.label" :min-width="item.width"></el-table-column>
        <el-table-column
          v-else-if="item.isSelect"
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column v-else-if="item.isarray" :label="item.label" :min-width="item.width">
          <template slot-scope="scope">
            <span>{{item.array[scope.row[item.prop]]}}</span>
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.islabel" :prop="item.prop" :label="item.label" :min-width="item.width"></el-table-column>
        <el-table-column v-else-if="item.btns" :label="item.label" :min-width="item.width">
          <template slot-scope="scope">
            <div class="btn-box">
              <span v-for="(btn, btnIndex) in item.btns" v-if="(btn.status==scope.row[item.prop])||btn.show" :key="btnIndex" :class="btn.class" @click="doClick(btn,scope)">{{btn.label}}</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Page class="page-info" :pageInfo="pageInfo" @changePage="changePage" />
    <AddressAdd v-if="$store.state.dias.addressAdd.show" @flash="getList" />
  </div>
</template>
<script>
import Page from '@/components/page.vue'
import AddressAdd from '../../center/address/dia/add.vue'
export default {
  props:['tableModel0','flash'],
  components: {Page,AddressAdd},
  name: "",
  data() {
    return {
      tableData:[],
      pageInfo:{
        page:1,
        size:10,
        total:1
      },
      moreSearch:{
        date:[]
      }
    };
  },
  computed:{
    formaltData(){
      return this.tableModel0
    },
  },
  watch:{
    flash(){
      this.getList()
    }
  },
  methods: {
    /**
     * @name 查看详情
     */
    showDetail(scope){
      let path = _g.getRouterPath(this) + '/detail'
      //this.$router.push({path,query:{id:scope.row.askBuyId,status:scope.row.status}})
      this.$router.push({path,query:{id:scope.row.id,status:scope.row.status,categoryId:scope.row.categoryId}})
    },
    doClick(btn,scope){
      if(btn.click){
        this[btn.click](scope)
      }
    },

    /**
     * @name 搜索
     */
    doSearch(){
      let params={}
      if(this.moreSearch.date.length>0){
        params[this.formaltData.searchInfo.keys[0]]=this.moreSearch.date[0];
        params[this.formaltData.searchInfo.keys[1]]=this.moreSearch.date[1];
      }
      /** 处理多的搜索数据 */
      if(this.formaltData.searchInfo.more){
        this.formaltData.searchInfo.more.forEach(ele=>{
          if(ele.prop)params[ele.prop]=ele.value
        })
        
      }
      this.getList(params)
    },

    /**
     * @name 删除
     */
    doDel(scope){
      _g.apiPost(this.tableModel0.urls.del,{id:scope.row.id}).then(res=>{
        _g.toMessage(res)
        if(res.status==0)this.getList()
      })
    },

      /**
       * 批量删除
       */
      undercarriage(){
        console.log(2222222222222)
      },

    /**
     * @name 已读
     */
    doRead(scope){
      _g.apiPost('userMessage/checkMsg.do',{id:scope.row.id}).then(res=>{
        _g.toMessage(res)
        if(res.status==0)this.$set(scope.row,'status',"1")
      })
    },

    doNothing(){

    },

    /**
     * @name 设置默认地址
     */
    setAddress(scope){
      _g.apiPost('/address/updateAddress.do',{id:scope.row.id}).then(res=>{
        _g.toMessage(res)
        if(res.status==0){
          this.tableData.forEach(ele=>{
            ele.status=1
          })
          this.$set(scope.row,'status',"0")
        }
      })
    },

    /**
     * @name 翻页
     */
    changePage(val){
      console.log("翻页");
      
    },

    /**
     * @name 上一页
     */
    prePage(){
        if(this.pageInfo.page>1){
            this.pageInfo.page--
            this.getProductList()
        }
    },

    /**
     * @name 下一页
     */
    nextPage(){
        if(this.pageInfo.page<this.pageInfo.pageTotal){
            this.pageInfo.page++
            this.getProductList()
        }
    },

    /**
     * @name 翻页
     */
    changePage(val){
        this.$set(this.pageInfo,"page",val)
        this.getProductList()
    },


    getProductList(){
        alert(this.path)
        let params={
            currPageNo:this.pageInfo.page,
            pageSize:this.pageInfo.pageTotal,
            categoryId:1
        }
        _g.apiPost('consumerCenter/checkAskBuyList.do',params).then(res=>{
            if(res.status == 0){
                this.$set(this,'listData',res.data.list)
                this.$set(this.pageInfo,'total',res.data.total)
            }else {
                _g.toMessage(res)
            }
        })
    },

    getList(param){
      let params=Object.assign(param||{},{
        currPageNo:this.pageInfo.page,
        pageSize:this.pageInfo.size,
      })
      if(this.flash.key){
        params[this.flash.key]=this.flash.status
      }else{
        params.status=this.flash.status
      }
      _g.apiPost(this.tableModel0.urls.list,params).then(res=>{
        if(res==undefined)return
        this.pageInfo.total=res.data.total
        this.tableData=res.data.list
      })
    }
  },
  created() {
    this.$nextTick(()=>{
      this.getList()
    })
  }
};
</script>
<style lang="scss" scoped>
.specify-body {
  min-height:700px;
  .search-box{
    font-size: 13px;
    margin: 15px 10px;
    display: flex;

    >span{
      margin-right: 10px;
      min-width: 70px;
      line-height: 40px;
      text-align: right;
    }

    .search-btn{
      width: 100px;
      margin-left: 10px;
    }
  }

  .table-operate{
    margin: 0 10px;

    .btn{
      padding: 7px 10px;
      border-radius: 0
    }
  }
  .table-box{
    padding: 10px;
  }
  .page-info{
    text-align: center;
    padding: 40px 0;
  }
  .btn-box{
    display: flex;
    justify-content: space-around;
  }
  .more-search{
    display: flex;

    >div{
      display: inherit;
      width: 150px;
      margin-left: 10px;

      >span{
        display: inline-block;
        min-width: 40px;
        line-height: 40px
      }
    }
  }
}
</style>